<template>
    <a-table ref="MyTable" v-bind="$attrs">
        <template v-for="(item, name) in $slots" #[name]="slotData">
            <slot :name="name" v-bind="slotData || {}"> </slot>
        </template>
        <template v-if="isEditRow" #bodyCell="{ record, text, column }">
            <template v-if="dataIndex.includes(column.key)">
                <a-input
                    v-if="
                        editableData[record.key] &&
                        column.dataIndex !== 'id' &&
                        column.dataIndex !== 'key'
                    "
                    v-model:value="editableData[record.key][column.dataIndex]"
                ></a-input>
                <template v-else>
                    <a-tooltip placement="left" :title="text">
                        {{ text }}
                        <!-- {{ record.key }} -->
                    </a-tooltip>
                </template>
            </template>
            <template v-if="column.key === 'action'">
                <span v-if="editableData[record.key]">
                    <a-typography-link @click="save(record.key)" style="margin-right: 8px"
                        >保存</a-typography-link
                    >
                    <a-popconfirm title="Sure to cancel?" @confirm="cancel(record)">
                        <a>取消</a>
                    </a-popconfirm>
                </span>
                <span v-else>
                    <a @click="edit(record.key)">编辑</a>
                    <a-popconfirm title="Sure to delete?" @confirm="cancel(record, 'del')">
                        <a style="margin-left: 10px; color: red">删除</a>
                    </a-popconfirm>
                </span>
            </template>
        </template>
        <!-- <template v-if="isTags">

    </template> -->
    </a-table>
</template>
<script lang="ts">
import { defineComponent, toRefs, reactive, onMounted } from 'vue'
// import { cloneDeep } from 'lodash-es'
export default defineComponent({
    name: 'myTable',
    emits: ['updateTable', 'refresh', 'del'],
    props: {
        isEditRow: {
            type: Boolean,
            default: false
        },
        ignoredColumns: {
            type: Array,
            default: () => ['id', 'key', 'action']
        }
    },
    mounted() {
        const entries = Object.entries((this as any).$refs.MyTable)
        for (const [key, value] of entries) {
            ;(this as any)[key] = value
        }
    },
    setup(props, { attrs, emit }) {
        // const dataSource: any = attrs.dataSource
        const state = reactive({
            name: 'myTable',
            edit: false,
            types: [],
            editableData: [] as any,
            dataIndex: [] as string[]
            // dataSource: attrs.dataSource
        })
        onMounted(() => {
            const columns: any[] = attrs.columns as any
            state.dataIndex = columns
                .filter((el: any) => el.dataIndex !== 'action')
                .map((el: any) => {
                    return el.dataIndex
                })
        })
        const methods = {
            edit(key: string) {
                state.edit = true
                if (props.isEditRow) {
                    let dataSource = attrs.dataSource as any //表格数据源
                    state.editableData[key] = JSON.parse(
                        JSON.stringify(dataSource.filter((item: any) => key == item.key)[0])
                    ) //这里必须深拷贝
                }
            },
            save(key: string) {
                let dataSource = attrs.dataSource as any
                const oldobj = dataSource.filter((item: any) => key === item.key)[0]
                const newobj = state.editableData[key]
                const change = methods.isChange(oldobj, newobj)
                if (change) {
                    Object.assign(oldobj, newobj)
                    delete state.editableData[key]
                    emit('updateTable', {
                        dataSource,
                        editObj: dataSource.find((item: any) => key === item.key),
                        change: true
                    })
                } else {
                    delete state.editableData[key]
                    emit('updateTable', { change: false })
                }
            },
            cancel(record: any, type?: string) {
                if (type) {
                    emit('del', record)
                } else {
                    delete state.editableData[record.key]
                }
            },
            isChange(oldobj: any, newobj: any) {
                for (let key in oldobj) {
                    if (oldobj[key] !== newobj[key]) {
                        return true
                    }
                }
            }
        }
        return {
            ...toRefs(state),
            ...methods
        }
    }
})
</script>
<style lang="scss">
.ant-table {
    .ant-table-container {
        .ant-table-thead {
            .ant-table-cell {
                background-color: rgb(209, 217, 255);
            }
        }
    }
}

// :where(.css-dev-only-do-not-override-1dgrbo1).ant-table-wrapper .ant-table-thead > tr > th,
// :where(.css-dev-only-do-not-override-1dgrbo1).ant-table-wrapper .ant-table-tbody > tr > td,
// :where(.css-dev-only-do-not-override-1dgrbo1).ant-table-wrapper tfoot > tr > th,
// :where(.css-dev-only-do-not-override-1dgrbo1).ant-table-wrapper tfoot > tr > td {
//     padding: 13px 10px;
// }
</style>
